<template>
  <div class="hello padding30">
    <el-row class="search">
      <el-select v-model="searchValue1"  placeholder="" class="mr20">
        <el-option
          label="ce1"
          value="1">
        </el-option>
      </el-select>
      <el-date-picker
        class="searchTime mr20"
        v-model="searchValue2"
        type="daterange"
        start-placeholder="start time"
        end-placeholder="end time"
        :default-time="['00:00:00', '23:59:59']">
      </el-date-picker>
      <el-input class="searchInput"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
    </el-row>
    <el-row class="pageTitle">
      <el-col :span="12" class="title">Loyalty promotions</el-col>
      <el-col :span="12" class="textRight">
        <el-button type="primary" >
          <div class="flexMidelCenter" >
            <div>Create</div>
            <img src="../assets/images/add.png" alt="" class="ml12">
          </div>
        </el-button>
      </el-col>
    </el-row>
    <div class="bgWhite plr24">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
        <el-table-column
          width="80"
          prop="type"
          label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.type">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column align="right" width="130">
          <template slot-scope="scope">
            <img
              class="edit"
              src="../assets/images/btn-delete.png"
              @click="deleteDialog=true"
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="mt20">
      <el-row class="pageTitle">
      <el-col :span="24" class="textRight">
        <el-button type="primary" >
          <div class="flexMidelCenter" >
            <div>Export</div>
            <img src="../assets/images/导出.png" class=" ml12">
          </div>
        </el-button>
          <el-popover  trigger="click" width="220" placement="bottom-end" >
            <el-checkbox class="preCheck" v-model="selectShow.branch" label="Branch" border disabled></el-checkbox>
            <el-checkbox class="preCheck" v-model="selectShow.location" label="Location" border ></el-checkbox>
            <div class="tableSelect" slot="reference" >
            </div>
          </el-popover>
      </el-col>
    </el-row>
      <div class="bgWhite plr24">
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="Date"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="Name"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="Address">
          </el-table-column>
          <el-table-column
            v-if="selectShow.branch"
            prop="branch"
            label="Branch">
          </el-table-column>
          <el-table-column
            v-if="selectShow.location"
            prop="location"
            label="Location">
          </el-table-column>
          <el-table-column align="right" width="130">
            <template slot-scope="scope">
              <img
                v-show="editStatus == scope.$index"
                class="edit"
                src="../assets/images/编辑.png"
              >
              <img
                v-show="editStatus == scope.$index"
                class="edit"
                src="../assets/images/btn-delete.png"
                @click="deleteRow"
              >
              <img
                v-show="editStatus == scope.$index"
                class="normal edit"
                src="../assets/images/selected.png"
                @click="editStatus=-1"
              >
              <img
                v-show="editStatus !== scope.$index"
                status="false"
                class="normal edit"
                src="../assets/images/normal.png"
                @click="editStatus=scope.$index"
              >
            </template>
          </el-table-column>
        </el-table>
        <pageCom :page="page" @changePage="changepage"></pageCom>
      </div>
    </div>
    <el-dialog
      title="Delete Item"
      :visible.sync="deleteDialogStatus"
      class="deleteDialog"
    >
      <span>Are you sure you want to delete the Item name item?</span>
      <div slot="footer" class="dialog-footer">
        <p class="cancel" @click="deleteDialogStatus=false">CANCEL</p>
        <p class="delete" @click="deleteDialogStatus=false">DELETE</p>
      </div>
    </el-dialog>
    <el-dialog
      title="Delete Customer"
      :visible.sync="deleteDialog"
      class="deleteDialog"
    >
      <div >
        <p>
          Are you sure you want to delete
          <span class="beWeight">Customer name</span> from your
        </p>
        <p>Directory?</p>
      </div>
      <div class="beWeight">
        <span>Please SUBMIT the following actions:</span>
      </div>
      <div >
        <span>● This profile will be permanently removed from your</span>
        <br>
        <span>Directory across all locations</span>
        <br>
        <span>● All associated transactions will no longer be linked to</span>
        <br>
        <span>the customer</span>
      </div>
      <div >
            <span>
              <el-checkbox v-model="deleteFlag"></el-checkbox>
            </span>
        <span>I have read and understand the implications of</span>
        <br>
        <span>deleting customers.</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <p class="cancel" @click="deleteDialog=false">CANCEL</p>

        <p class="delete" @click="deleteDialog=false" v-if="deleteFlag">DELETE</p>
        <p class="deleteAgin" @click="deleteDialog=false" v-if="!deleteFlag">DELETE</p>

      </div>
    </el-dialog>

  </div>
</template>

<script>
import pageCom from '../base/page'
export default {
  name: 'index',
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        type:false,
        address: '上海市普陀区金沙江路 1518 弄',
        branch:'branch1',
        location:'国创园15栋',
      }, {
        date: '2016-05-04',
        name: '王小虎',
        type:false,
        address: '上海市普陀区金沙江路 1517 弄',
        branch:'branch1',
        location:'国创园15栋',
      }, {
        date: '2016-05-01',
        name: '王小虎',
        type:false,
        address: '上海市普陀区金沙江路 1519 弄',
        branch:'branch1',
        location:'国创园15栋',
      }, {
        date: '2016-05-03',
        name: '王小虎',
        type:true,
        address: '上海市普陀区金沙江路 1516 弄',
        branch:'branch1',
        location:'国创园15栋',
      }],
      searchValue1: '',
      searchValue2: '',
      page: {
        pageNum: 2,
        pageSize: 10,
        total: 111
      },
      editStatus:-1,
      deleteDialogStatus:false,
      deleteDialog:false,
      deleteFlag:false,
      selectShow:{
        branch:true,
        location:true,
      }
    }
  },
  methods: {
    changepage (page) {
      console.log(page)
    },
    deleteRow(){
      this.deleteDialogStatus=true
    }
  },
  components: {
    pageCom: pageCom
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
  background: #f4f5f7;
}
.beWeight{
  color: #282c37;
  font-weight: 700;
  padding: 5px 0;
}
</style>
